<template>
  <div>
    <h2>全部品牌数据:</h2>
    <ul>
      <li v-for="item in brandsList" :key="item.id">
        <p>name:{{ item.name }}</p>
        <p>ctime:{{ item.ctime }}</p>
        <el-input v-model="item.name" placeholder="请输入品牌"></el-input>
        <el-button
          type="primary"
          size="small"
          @click="updatebrand(item.id, item.name)"
          >修改品牌</el-button
        >
        <el-button type="primary" size="small" @click="deletebrand(item.id)"
          >删除品牌</el-button
        >
      </li>
    </ul>
    <el-divider></el-divider>
    <p>get请求第一种：{{ brandone }}</p>
    <p>get请求第二种：{{ brandone1 }}</p>
    <el-divider></el-divider>
    <h2>post请求</h2>

    <el-input v-model="brandName" placeholder="请输入品牌"></el-input>
    <el-button type="primary" size="small" @click="addbrand"
      >添加品牌</el-button
    >
    <el-divider></el-divider>
    <h2>生命周期</h2>
    <p ref="p1">p1的文字</p>
    <h2>定时器</h2>
    <p>{{ num }}</p>
    <el-button type="primary" size="small" @click="run">启动定时器</el-button>
  </div>
</template>

<script>
export default {
  name: 'day8-page',
  data() {
    return {
      brandsList: [],
      brandone: [],
      brandone1: [],
      brandName: '',
      timer: null,
      num: 1
    }
  },
  methods: {
    // https://blog.csdn.net/ligonglanyuan/article/details/120665684
    /*   {
      "id": 1,
      "name": "宝马",
      "ctime": "2020-02-02 10:10:10"
    }, */
    async getbrandsList() {
      const data = await this.$req('/brands', 'get')
      console.log('data: ', data)
      this.brandsList = data
    },
    async getbrandone() {
      const data = await this.$req('/brands', 'get', { id: 1 })
      console.log('data: ', data)
      this.brandone = data
    },
    async getbrandone1() {
      const data = await this.$req('/brands/1', 'get')
      console.log('data: ', data)
      this.brandone1 = data
    },
    async updatebrand(id, name) {
      const data = await this.$req(`/brands/${id}`, 'put', { name })
      console.log('data111: ', data)
      this.getbrandsList()
      this.$message({
        message: '恭喜你，修改成功！',
        type: 'success'
      })
    },
    async deletebrand(id) {
      const data = await this.$req(`/brands/${id}`, 'delete', { id })
      console.log('data222: ', data)
      this.$message({
        message: '恭喜你，删除成功！',
        type: 'success'
      })
      this.getbrandsList()
    },

    async addbrand() {
      let postData = {}
      if (this.brandName !== '') {
        const brandName = this.brandName
        postData = {
          name: brandName,
          ctime: Date.now()
        }
      }
      const data = await this.$req('/brands', 'post', postData)
      console.log('111111: ', data)
      this.$message({
        message: '恭喜你，添加成功！',
        type: 'success'
      })
      this.getbrandsList()
    },
    // 定时器
    run() {
      this.timer = setInterval(() => {
        // 需要做的事情
        this.num++
        console.log('this.num: ', this.num)
      }, 1000)
    },
    // 清除定时器
    clear() {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  created() {
    this.getbrandsList()
    this.getbrandone()
    this.getbrandone1()
    // this.addbrand()
    // console.log(this.$refs.p1.innerHTML)
  },
  mounted() {
    // 获取dom结构需要在mounted里面
    console.log(this.$refs.p1.innerHTML)
  },
  beforeDestroy() {
    // 防止进入其他页面定时器还要运行
    this.clear()
  }
}
</script>

<style lang="scss" scoped>
</style>
